<template>
	<div>
		<!--面包屑导航区域-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>分类参数</el-breadcrumb-item>
		</el-breadcrumb>
		<!--卡片视图区域-->
		<el-card>
			<!--头部警告区域-->
			<el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon> </el-alert>
			<!--选择商品分类区域-->
			<el-row>
				<el-col>
					<span>选择商品分类：</span>
					<!--选择商品分类的级联选择框-->
					<el-cascader v-model="selectCatKeys" :options="catList" :props="cateProps" @change="handleChange"></el-cascader>
				</el-col>
			</el-row>
			<!--tab页签区域-->
			<el-tabs v-model="activeName" @tab-click="handleTabClick">
				<el-tab-pane label="动态参数" name="many">
					<el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加参数</el-button>
					<!--动态参数表格-->
					<el-table :data="manyTableData" border stripe>
						<!--展开行-->
						<el-table-column type="expand">
							<template slot-scope="scope">
								<el-tag :key="index" v-for="(item,index) in scope.row.attr_vals" closable @close="handleClose(index,scope.row)">
									{{item}}
								</el-tag>
								<!--输入文本框-->
								<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
								</el-input>
								<!--添加按钮-->
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<!--索引列-->
						<el-table-column type="index"></el-table-column>
						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.attr_id)">修改</el-button>
								<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="静态属性" name="only">
					<el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加属性</el-button>
					<!--静态属性表格-->
					<el-table :data="onlyTableData" border stripe>
						<!--展开行-->
						<el-table-column type="expand">
							<template slot-scope="scope">
								<el-tag :key="index" v-for="(item,index) in scope.row.attr_vals" closable @close="handleClose(index,scope.row)">
									{{item}}
								</el-tag>
								<!--输入文本框-->
								<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
								</el-input>
								<!--添加按钮-->
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<!--索引列-->
						<el-table-column type="index"></el-table-column>
						<el-table-column label="属性名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
								<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<!--添加参数的对话框-->
		<el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
				<el-form-item :label="titleText" prop="attr_name">
					<el-input v-model="addForm.attr_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="add">确 定</el-button>
		  </span>
		</el-dialog>
		<!--修改参数的对话框-->
		<el-dialog :title="'修改'+titleText" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="100px">
				<el-form-item :label="titleText" prop="attr_name">
					<el-input v-model="editForm.attr_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="edit">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//商品分类列表
				catList: [],
				//级联选择框的配置对象
				cateProps: {
					expandTrigger: 'hover',
					value: "cat_id",
					label: "cat_name",
					children: "children"
				},
				//级联选择框双向绑定到的数组
				selectCatKeys: [],
				//被激活的页签名称
				activeName: "many",
				//动态参数数据
				manyTableData: [],
				//静态参数数据
				onlyTableData: [],
				//控制添加对话框的显示与隐藏
				addDialogVisible: false,
				//添加参数的表单数据对象
				addForm: {
					attr_name: ""
				},
				addFormRules: {
					attr_name: [{
						required: true,
						message: '请输入参数名称',
						trigger: 'blur'
					}]
				},
				editDialogVisible: false,
				editForm: {
					attr_name: ""
				}
			}
		},
		created() {
			//获取所有的商品分类列表
			this.getCatList();
		},
		computed: {
			//			如果按钮需要被禁用,返回true,否在返回false
			isBtnDisabled() {
				if(this.selectCatKeys.length !== 3) {
					return true
				}
				return false
			},
			//当前选中的三级分类id
			cateId() {
				if(this.selectCatKeys.length === 3) {
					return this.selectCatKeys[2]
				}
				return null;
			},
			//动态计算标题的文本
			titleText() {
				if(this.activeName === "many") {
					return "动态参数"
				} else {
					return "静态属性"
				}
			}
		},
		methods: {
			async getCatList() {
				const {
					data: res
				} = await this.$http.get("categories");
				if(res.meta.status !== 200) {
					return this.$message.error("获取商品分类失败！")
				}
				this.catList = res.data;
			},
			//级联选择框选中变化触发的函数
			handleChange() {
				this.getParamsData();
			},
			//tab页签点击事件的处理函数
			handleTabClick() {
				this.getParamsData()
			},
			//获取参数的列表数据
			async getParamsData() {
				//				证明选中的不是三级分类
				if(this.selectCatKeys.length !== 3) {
					this.selectCatKeys = [];
					this.manyTableData=[];
					this.onlyTableData=[];
					return
				}
				//				证明选中的是三级分类
				const {
					data: res
				} = await this.$http.get(`categories/${this.cateId}/attributes`, {
					params: {
						sel: this.activeName
					}
				});
				if(res.meta.status !== 200) {
					return this.$message.error("获取参数列表失败！")
				}
				res.data.forEach(item => {
					item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
					//控制文本框的显示与隐藏
					item.inputVisible = false;
					//					文本框的输入内容
					item.inputValue = "";
				})
				if(this.activeName === "many") {
					this.manyTableData = res.data;
				} else {
					this.onlyTableData = res.data;
				}
			},
			//监听添加对话框的关闭事件
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			//
			add() {
				this.$refs.addFormRef.validate(async valid => {
					if(!valid) return;
					const {
						data: res
					} = await this.$http.post(`categories/${this.cateId}/attributes`, {
						attr_name: this.addForm.attr_name,
						attr_sel: this.activeName
					});
					if(res.meta.status !== 201) {
						return this.$message.error("添加参数失败！")
					}
					this.$message.success("添加参数成功！");
					this.getParamsData();
					this.addDialogVisible = false;
				});
			},
			async showEditDialog(attr_id) {
				//查询当前参数的信息
				const {
					data: res
				} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`, {
					params: {
						attr_sel: this.activeName
					}
				});
				if(res.meta.status !== 200) {
					return this.$message.error("获取参数信息失败！")
				}
				this.editForm = res.data;
				this.editDialogVisible = true;
			},
			//监听修改对话框的关闭事件
			editDialogClosed() {
				this.$refs.editFormRef.resetFields()
			},
			edit() {
				this.$refs.editFormRef.validate(async valid => {
					if(!valid) return;
					const {
						data: res
					} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {
						attr_name: this.editForm.attr_name,
						attr_sel: this.activeName
					});
					if(res.meta.status !== 200) {
						return this.$message.error("修改参数失败！")
					}
					this.$message.success("修改参数成功！");
					this.getParamsData();
					this.editDialogVisible = false;
				});
			},
			async deleteParams(attr_id) {
				//弹框询问用户是否删除数据
				const confirmResult = await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if(confirmResult !== "confirm") {
					return this.$message.info("已取消删除！")
				}
				const {
					data: res
				} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`);
				if(res.meta.status !== 200) {
					return this.$message.error("删除参数失败！");
				}
				this.$message.success("删除参数成功！");
				this.getParamsData();
			},
			//文本框失去焦点或者按下enter键都会触发的函数
			async handleInputConfirm(row) {
				if(row.inputValue.trim().length === 0) {
					row.inputValue = "";
					row.inputVisible = false;
					return;
				}
				//证明输入了内容，需要做后续处理
				row.inputVisible = false;
				row.attr_vals.push(row.inputValue.trim());
				row.inputValue = "";
				row.inputVisible = false;
				this.saveAttrVals(row);
			},
			showInput(row) {
				row.inputVisible = true;
				//给文本框获得焦点,$nextTick的方法和作用,就是当页面上元素被重新渲染之后，才会执行回调函数中的代码
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},
			//将对attr_vals的操作保存到数据库
			async saveAttrVals(row){
				const {
					data: res
				} = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{
					attr_name:row.attr_name,
					attr_sel:row.attr_sel,
					attr_vals:row.attr_vals.join(" ")
				});
				if(res.meta.status !== 200) {
					return this.$message.error("修改参数项失败！");
				}
				this.$message.success("修改参数项成功！");
			},
			//删除对应的参数可选项
			handleClose(index,row){
				row.attr_vals.splice(index,1);
				this.saveAttrVals(row);
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-row {
		margin: 15px 0;
	}
	
	.el-tag {
		margin-right: 10px;
	}
	
	.input-new-tag {
		width: 120px
	}
</style>